<template>
    <div class="body">
        <el-form :rules="rules" ref="loginForm" :model="loginForm" class="loginContainer">
            <h3 class="loginTitle">
                欢迎登录
            </h3>
            <el-form-item prop="username">
                <el-input type="text" v-model="loginForm.username" placeholder="请输入用户名">
                </el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input type="password" v-model="loginForm.password" placeholder="请输入密码">
                </el-input>
            </el-form-item>
            <el-button type="primary" class="submitLogin" style="width:100%" @click="submitLogin">登录</el-button>
        </el-form>
    </div>
</template>

<script>
export default {
    name: "Login",
    data() {
        return {
            loginForm: {
                username: "admin",
                password: "123456",
            },
            checked: true,
            rules: {
                username: [
                    { required: true, message: "请输入用户名", trigger: "blur" }, { min: 5, max: 14, message: '长度在 5 到 14 个字符', trigger: 'blur' }
                ],
                password: [{ required: true, message: "请输入密码", trigger: "blur" }, { min: 6, message: '密码长度要大于6', trigger: 'blur' }],
            }

        }
    },
    methods: {
        submitLogin() {
            this.$refs.loginForm.validate((valid) => {
                if (valid) {
                    let userInfo = { name: "admin", password: "123456" }
                    if (userInfo.name != this.loginForm.username) {
                        this.$message.error('用户名错误，重新输入')
                    } else if (userInfo.password != this.loginForm.password) {
                        this.$message.error('密码错误，重新输入')
                    } else {
                        this.$message({
                            showClose: true,
                            message: '登录成功！',
                            type: 'success'
                        });
                        this.$emit("handleLogin", true)
                    }
                } else {
                    this.$message.error('登录失败，重新输入');
                }
            });
        }
    }
};
</script>

<style lang="scss">
.body {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("../../assets/background.png");

    .loginContainer {
        border-radius: 15px;
        background-clip: padding-box;
        text-align: left;
        margin: auto;
        margin-top: 180px;
        width: 350px;
        padding: 15px 35px 15px 35px;
        background: aliceblue;
        border: 1px solid blueviolet;
        box-shadow: 0 0 25px #f885ff;
    }

    .loginTitle {
        margin: 0px auto 28px auto;
        text-align: center;
        font-size: 40px;
    }

    .submitLogin {
        margin-bottom: 15px !important;
    }
}
</style>
